<template>
    <el-card style="margin-top: 10px">
        <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
            <el-tab-pane label="综合排序" name="first">
                <div v-loading="loading" class="content-item">
                    <div class="content-item-com" v-for="img in imageData" :key="img.star">
                        <img style="width: 210px;height: 140px"
                            :src="img.bigImage" alt="" >
                        <div style="margin: 0 10px;height: 130px;">
                            <div style="margin: 5px 0; font-size: 12px;height: 25px">{{img.title}}</div>
                            <div style=" width:180px;display: flex;justify-content: space-between;font-size: 12px">
                                <div>{{img.price}}</div>
                                <div>{{img.people}}浏览</div>
                            </div>
                            <div><img src="https://rs.dance365.com/vip_free@3x.png" alt=""
                                    style="width: 50px;height: 20px;"></div>
                            <div style="display: flex;margin:5px 0 0 0;font-size: 12px" >
                                <svg class="icon" aria-hidden="true" style="width: 15px;margin-top: 7px">
                                    <use xlink:href="#icon-dianzan"></use>
                                </svg>
                                <div style="width: 40px;line-height: 30px">{{img.hand}}</div>
                                <svg class="icon" aria-hidden="true" style="width: 15px;margin-top: 8px">
                                    <use xlink:href="#icon-xiaoxi"></use>
                                </svg>
                                <div style="width: 40px;line-height: 30px">{{img.message}}</div>
                                <div style="padding: 6px 0">
                                    <el-icon color="yellow">
                                        <Star />
                                    </el-icon>
                                </div>
                                <div style="width: 40px;line-height: 30px">{{img.star}}</div>
                            </div>
                            <div
                                style="border-top: solid black 1px;font-size: 10px;display: flex;justify-content: space-between;align-items: center;padding: 10px 0">
                                <img style="width: 30px;height: 30px;border-radius: 50%"
                                    :src="img.headpicture"
                                    alt="">
                                <span>{{img.writer}}</span>
                                <span>{{img.date}}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </el-tab-pane>
            <el-tab-pane label="销量" name="second">
                <div v-loading="loading" class="content-item">
                    <div class="content-item-com" v-for="img in courseStore.imageList2" :key="img.star">
                        <img style="width: 210px;height: 140px"
                             :src="img.bigImage" alt="" >
                        <div style="margin: 0 10px;height: 130px;">
                            <div style="margin: 5px 0; font-size: 12px;height: 25px">{{img.title}}</div>
                            <div style=" width:180px;display: flex;justify-content: space-between;font-size: 12px">
                                <div>{{img.price}}</div>
                                <div>{{img.people}}浏览</div>
                            </div>
                            <div><img src="https://rs.dance365.com/vip_free@3x.png" alt=""
                                      style="width: 50px;height: 20px;"></div>
                            <div style="display: flex;margin:5px 0 0 0;font-size: 12px" >
                                <svg class="icon" aria-hidden="true" style="width: 15px;margin-top: 7px">
                                    <use xlink:href="#icon-dianzan"></use>
                                </svg>
                                <div style="width: 40px;line-height: 30px">{{img.hand}}</div>
                                <svg class="icon" aria-hidden="true" style="width: 15px;margin-top: 8px">
                                    <use xlink:href="#icon-xiaoxi"></use>
                                </svg>
                                <div style="width: 40px;line-height: 30px">{{img.message}}</div>
                                <div style="padding: 6px 0">
                                    <el-icon color="yellow">
                                        <Star />
                                    </el-icon>
                                </div>
                                <div style="width: 40px;line-height: 30px">{{img.star}}</div>
                            </div>
                            <div
                                style="border-top: solid black 1px;font-size: 10px;display: flex;justify-content: space-between;align-items: center;padding: 10px 0">
                                <img style="width: 30px;height: 30px;border-radius: 50%"
                                     :src="img.headpicture"
                                     alt="">
                                <span>{{img.writer}}</span>
                                <span>{{img.date}}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </el-tab-pane>
            <el-tab-pane label="浏览量" name="third">
                <div v-loading="loading" class="content-item">
                    <div class="content-item-com" v-for="img in courseStore.imageList3" :key="img.star">
                        <img style="width: 210px;height: 140px"
                             :src="img.bigImage" alt="" >
                        <div style="margin: 0 10px;height: 130px;">
                            <div style="margin: 5px 0; font-size: 12px;height: 25px">{{img.title}}</div>
                            <div style=" width:180px;display: flex;justify-content: space-between;font-size: 12px">
                                <div>{{img.price}}</div>
                                <div>{{img.people}}浏览</div>
                            </div>
                            <div><img src="https://rs.dance365.com/vip_free@3x.png" alt=""
                                      style="width: 50px;height: 20px;"></div>
                            <div style="display: flex;margin:5px 0 0 0;font-size: 12px" >
                                <svg class="icon" aria-hidden="true" style="width: 15px;margin-top: 7px">
                                    <use xlink:href="#icon-dianzan"></use>
                                </svg>
                                <div style="width: 40px;line-height: 30px">{{img.hand}}</div>
                                <svg class="icon" aria-hidden="true" style="width: 15px;margin-top: 8px">
                                    <use xlink:href="#icon-xiaoxi"></use>
                                </svg>
                                <div style="width: 40px;line-height: 30px">{{img.message}}</div>
                                <div style="padding: 6px 0">
                                    <el-icon color="yellow">
                                        <Star />
                                    </el-icon>
                                </div>
                                <div style="width: 40px;line-height: 30px">{{img.star}}</div>
                            </div>
                            <div
                                style="border-top: solid black 1px;font-size: 10px;display: flex;justify-content: space-between;align-items: center;padding: 10px 0">
                                <img style="width: 30px;height: 30px;border-radius: 50%"
                                     :src="img.headpicture"
                                     alt="">
                                <span>{{img.writer}}</span>
                                <span>{{img.date}}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </el-tab-pane>
            <el-tab-pane name="fourth">
                <template #label>
                    <el-popover v-model:visible="visible" placement="top" :width="160">
                        <el-button style="border: 0;margin-left: 13px" @click="toPrice(1)">价格由低到高</el-button>
                        <el-button style="border: 0;margin-left: 13px" @click="toPrice(2)">价格由高到低</el-button>
                        <template #reference>
                            <el-button @click="visible = true" style="border: 0;font-size: 17px">
                                价格
                                <el-icon class="el-icon--right">
                                    <arrow-down />
                                </el-icon>
                            </el-button>
                        </template>
                    </el-popover>
                </template>
                <div v-loading="loading" class="content-item">
                    <div v-if="arrData" class="content-item-com" v-for="img in courseStore.imageList4" :key="img.star">
                        <img style="width: 210px;height: 140px"
                             :src="img.bigImage" alt="" >
                        <div style="margin: 0 10px;height: 130px;">
                            <div style="margin: 5px 0; font-size: 12px;height: 25px">{{img.title}}</div>
                            <div style=" width:180px;display: flex;justify-content: space-between;font-size: 12px">
                                <div>{{img.price}}</div>
                                <div>{{img.people}}浏览</div>
                            </div>
                            <div><img src="https://rs.dance365.com/vip_free@3x.png" alt=""
                                      style="width: 50px;height: 20px;"></div>
                            <div style="display: flex;margin:5px 0 0 0;font-size: 12px" >
                                <svg class="icon" aria-hidden="true" style="width: 15px;margin-top: 7px">
                                    <use xlink:href="#icon-dianzan"></use>
                                </svg>
                                <div style="width: 40px;line-height: 30px">{{img.hand}}</div>
                                <svg class="icon" aria-hidden="true" style="width: 15px;margin-top: 8px">
                                    <use xlink:href="#icon-xiaoxi"></use>
                                </svg>
                                <div style="width: 40px;line-height: 30px">{{img.message}}</div>
                                <div style="padding: 6px 0">
                                    <el-icon color="yellow">
                                        <Star />
                                    </el-icon>
                                </div>
                                <div style="width: 40px;line-height: 30px">{{img.star}}</div>
                            </div>
                            <div
                                style="border-top: solid black 1px;font-size: 10px;display: flex;justify-content: space-between;align-items: center;padding: 10px 0">
                                <img style="width: 30px;height: 30px;border-radius: 50%"
                                     :src="img.headpicture"
                                     alt="">
                                <span>{{img.writer}}</span>
                                <span>{{img.date}}</span>
                            </div>
                        </div>
                    </div>
                    <div v-else class="content-item-com" v-for="img in courseStore.imageList5" :key="img.star">
                        <img style="width: 210px;height: 140px"
                             :src="img.bigImage" alt="" >
                        <div style="margin: 0 10px;height: 130px;">
                            <div style="margin: 5px 0; font-size: 12px;height: 25px">{{img.title}}</div>
                            <div style=" width:180px;display: flex;justify-content: space-between;font-size: 12px">
                                <div>{{img.price}}</div>
                                <div>{{img.people}}浏览</div>
                            </div>
                            <div><img src="https://rs.dance365.com/vip_free@3x.png" alt=""
                                      style="width: 50px;height: 20px;"></div>
                            <div style="display: flex;margin:5px 0 0 0;font-size: 12px" >
                                <svg class="icon" aria-hidden="true" style="width: 15px;margin-top: 7px">
                                    <use xlink:href="#icon-dianzan"></use>
                                </svg>
                                <div style="width: 40px;line-height: 30px">{{img.hand}}</div>
                                <svg class="icon" aria-hidden="true" style="width: 15px;margin-top: 8px">
                                    <use xlink:href="#icon-xiaoxi"></use>
                                </svg>
                                <div style="width: 40px;line-height: 30px">{{img.message}}</div>
                                <div style="padding: 6px 0">
                                    <el-icon color="yellow">
                                        <Star />
                                    </el-icon>
                                </div>
                                <div style="width: 40px;line-height: 30px">{{img.star}}</div>
                            </div>
                            <div
                                style="border-top: solid black 1px;font-size: 10px;display: flex;justify-content: space-between;align-items: center;padding: 10px 0">
                                <img style="width: 30px;height: 30px;border-radius: 50%"
                                     :src="img.headpicture"
                                     alt="">
                                <span>{{img.writer}}</span>
                                <span>{{img.date}}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </el-tab-pane>
        </el-tabs>

        <el-form style="height: 100px;" v-loading="isLoading" v-if="isLoading"></el-form>
        <div style="margin: 10px 0;text-align: center" v-else><el-button @click="toMore" >加载更多</el-button></div>
    </el-card>
</template>
<script lang="ts">
export default {
    name: "ContentItem"
}
</script>
<script setup lang="ts">
import { ArrowDown,Star } from '@element-plus/icons-vue'
import type {TabsPaneContext} from "element-plus";
import {nextTick, ref, watch, withDefaults} from "vue";
import {defineProps} from "vue";
import {useCourseStore} from "@/store/course";
import type {ImageDataListModel} from "@/mock/course";
import { ElLoading } from 'element-plus'

const courseStore=useCourseStore()
interface Props {
    imageData:ImageDataListModel
}

const props=withDefaults(defineProps<Props>(),{
    imageData:[] as any
})
// let imageWatch=ref()
// watch(()=>props.imageData,()=>{
// imageWatch.value=props.imageData
//
// })
const visible=ref(false)

const activeName = ref('first')
const loading = ref(false)
let imageWatch2=ref()
const handleClick = (tab: TabsPaneContext, event: Event) => {
    loading.value=true
    if(tab.props.label==='销量'){
        courseStore.getImageList3()
    }else if(tab.props.label==='浏览量'){
        courseStore.getImageList4()
    }
    setTimeout(() => {
        loading.value = false
    }, 1000)
}

const isLoading=ref(false)
const toMore= ()=>{
    isLoading.value=true
    setTimeout(()=>{
        courseStore.getImageList2()
        isLoading.value=false
    },1000)
}
let arrData=ref(false)
const toPrice=async(num:number)=>{
    loading.value=true
    if(num===1){
        console.log(1)
        await courseStore.getImageList5()
        arrData.value=true
    }else if(num===2){
        console.log(2)
        await courseStore.getImageList6()
        arrData.value=false
    }
    setTimeout(() => {
        loading.value = false
    }, 1000)
}
</script>

<style scoped>

</style>
